<template>
	<view class="home">
		<!-- 轮播图 -->
		<HomeSwipper :banner="banner" @itemClick="handleItemClick"></HomeSwipper>
		<!-- 推荐栏 -->
		<HomeRecommend :recommend="recommend"></HomeRecommend>
		<!-- 流行 -->
		<HomePopular></HomePopular>
		<!-- 选项卡组件 -->
		<TabControl :titles="['流行','新款','精选']" @tabClick="handleTabClick"></TabControl>
		<!-- tab 栏下面的九宫格 -->
		<uni-grid :column="2" :highlight="false" :showBorder="false" :square="false" borderColor="#ff8198">
			<template v-for="(itemInfo, index) in goodsList[currentType].list" :key="itemInfo.iid">
				<uni-grid-item :index="index">
					<grid-view-item :itemInfo="itemInfo" @itemClick="handleGridItemClick"></grid-view-item>
				</uni-grid-item>
			</template>
		</uni-grid>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		storeToRefs
	} from 'pinia'

	import {
		useHomeStore
	} from '@/store/home.js'
	import HomeSwipper from './c-cpns/home-swipper.vue'
	import HomeRecommend from './c-cpns/home-recommend.vue'
	import HomePopular from './c-cpns/home-popular.vue'
	import TabControl from '@/components/tab-control/tab-control.vue'


	const homeStore = useHomeStore()
	const {
		banner,
		recommend
	} = storeToRefs(homeStore)
	onLoad(() => {
		// 获取首页轮播图和推荐栏的数据
		homeStore.fetchHomeMutilData()

		// 获取tab栏下面的数据
		homeStore.fetchTabItemsData('pop', 1)
		homeStore.fetchTabItemsData('new', 1)
		homeStore.fetchTabItemsData('sell', 1)
	})

	// 轮播图点击事件
	function handleItemClick(link) {
		uni.navigateTo({
			url: '/pages/web-view/web-view?link=' + link
		})
	}

	// tab 选项卡点击事件
	function handleTabClick(index) {
		// console.log('handleTabItemClick=>', index); // 0->pop 1->new 2->sell
		homeStore.setCurrentType(types[index])
	}

	// grid-view-item 的点击事件（会跳转到详情页面）
	function handleGridItemClick(itemInfo) {
		uni.navigateTo({
			url: '/pages/detail/detail?iid=' + itemInfo.iid
		})
	}
</script>

<style>

</style>